<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	#left{
		width: 400px;
		height: 400px;
		background: url(400.png) no-repeat;
		border: 1px solid #eee;
		margin: 30px;
		position: relative;
		float: left;
	}
	#left #sekuai{
		width: 200px;
		height: 200px;
		background: #E6EAF3;
		opacity: 0.6;
		filter: alpha(opacity=60);
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}
	#right{
		width: 400px;
		height: 400px;
		border: 2px solid black;
		float: left;
		overflow: hidden;
		position: relative;
		display: none;
	}
	#right #r_pic{
		position: absolute;
		left: 0;
		top: 0;

	}
	#left #gaizi{
		width: 400px;
		height: 400px;
		position: absolute;
		top: 0;
		left: 0;
		background: blue; 
		opacity: 0;
		filter: alpha(opacity=0);
	}
</style>
<script type="text/javascript">
window.onload = function(){

	var left = document.getElementById('left');//左侧区域
	var sekuai = document.getElementById('sekuai');//色块
	var right = document.getElementById('right');//右侧区域
	var r_pic = document.getElementById('r_pic');//右侧大图
	var gaizi = document.getElementById('gaizi');//盖子div

	// 给左侧区域加鼠标移动事件
	gaizi.onmousemove = function(e){
		// 获得事件对象
		var ev = window.event || e;
		//获得鼠标距离事件源的距离
		var m_left = ev.offsetX || ev.layerX;
		var m_top = ev.offsetY || ev.layerY;
		document.title = m_left+'|'+m_top;

		// 计算色块位置
		var s_left = m_left - 100;
		var s_top = m_top - 100;

		if(s_left>200){
			s_left=200;
		}
		if(s_left<0){
			s_left=0;
		}
		if(s_top>200){
			s_top=200;
		}
		if(s_top<0){
			s_top=0;
		}

		// 给小色块定义位置
		sekuai.style.left = s_left+'px';
		sekuai.style.top = s_top+'px';

		// 计算右侧大图的位置
		var r_pic_left = s_left*-2;
		var r_pic_top = s_top*-2;
		// 给大图定位置
		r_pic.style.left = r_pic_left+'px';
		r_pic.style.top = r_pic_top+'px';
	}

	// 鼠标移入事件
	gaizi.onmouseover = function(){
		sekuai.style.display = 'block';
		right.style.display = 'block';
	}

	// 鼠标移出事件
	gaizi.onmouseout = function(){
		sekuai.style.display = 'none';
		right.style.display = 'none';
	}
}
	


</script>
</head>

<body>

<div id="left">
	<div id="sekuai"></div>
	<div id="gaizi"></div>
</div>

<div id="right">
	<img src="800.jpg" alt="" id="r_pic" />
</div>

</body>
</html>
